<template>
	<view class="my-page" @touchstart="handlerTouchStart" @touchmove="handlerTouchMove" @touchend="handlerTouchEnd">
		<!--头部区域-->
		<view class="header" :style="{'padding-top':topPadding+'px','padding-bottom':wideValue+'px'}">
			<!--个人信息部分-->
			<view class="user-info">
				<!--左侧头像及信息-->
				<view class="user-info-left-box">
					<image flt="cover" :src="login?'/static/images/loginAvatar.png'
				 :'/static/images/defaultAvatar.jpg'" class="user-info-avatar"></image>
					<view class="id-num-box" v-if="login">
						<view class="user-name">启嘉网</view>
						<view class="user-ids">
							<text class="user-id">ID:0001</text>
						</view>
					</view>
					<view class="login-container" v-else>
						<text class="login-btn">未登录</text>
					</view>
				</view>
				<!--右侧个人资料修改入口-->
				<view class="user-info-right-box" v-if="login">
					<text class="text">个人资料</text>
					<uni-icons class="right-icon" custom-prefix="iconfont" type="icon-back" color="#fff" size="28px">

					</uni-icons>
				</view>
			</view>
			<!--个人数据部分-->
			<view class="user-data">
				<view>
					<text>{{login?99:0}}</text>
					<text>我的文章</text>
				</view>
				<view>
					<text>{{login?99:0}}</text>
					<text>我的关注</text>
				</view>
				<view>
					<text>{{login?99:0}}</text>
					<text>我的粉丝</text>
				</view>
			</view>
		</view>
		<!--圆弧及功能列表区域-->
		<view class="drag-content" :style="{transform: 'translateY('+translateY+'px)'}">
			<!--圆弧区域-->
			<view class="arc-container"></view>
			<scroll-view scroll-y="true" class="scroll-container">
				<!--功能列表区域-->
				<view class="scroll-container-content">
					<view class="my-functions">
						<view>
							<uni-icons custom-prefix="iconfont" type="icon-Shopping" size="24"></uni-icons>
							<text>商品管理</text>
						</view>
						<view>
							<uni-icons custom-prefix="iconfont" type="icon-attestation" size="24"></uni-icons>
							<text>账号认证</text>
						</view>
						<view>
							<uni-icons custom-prefix="iconfont" type="icon-gift" size="24"></uni-icons>
							<text>推广有礼</text>
						</view>
						<view>
							<uni-icons custom-prefix="iconfont" type="icon-feedback" size="24"></uni-icons>
							<text>意见反馈</text>
						</view>
						<view @click="handleOpenContact">
							<uni-icons custom-prefix="iconfont" type="icon-contact" size="24"></uni-icons>
							<text>联系我们</text>
						</view>
					</view>
					<!--退出登录 -->
					<view class="exit-container" v-if="login">
						<view class="exit-btn">
							退出登录
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!--联系我们(模拟框)-->
		<uni-popup ref="contact" type="center">
			<view class="contact-us">
				<image class="contact-us-logo" src="/static/cat.png" mode="widthFix"></image>
				<view class="contact-us-content">
					<text class="contact-us-content-title">
						联系我们
					</text>
					<text>QQ:**</text>
					<text>wx:***</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const wideValue = 50;
	export default {
		data() {
			return {
				moveDistance: 0, //当前产生的距离
				moveY: 0, //拖拽中的Y点
				startY: 0, //初始位置的Y点
				wideValue: wideValue,
				translateY: -1 * wideValue, //自身Y点
				topPadding: 0,
				login: true
			};
		},
		onReady() {
			//获取系统信息
			const SystemInfo = uni.getSystemInfoSync();
			//获取设备状态栏高度
			let statusBarHeight = SystemInfo.statusBarHeight;
			//获取胶囊按钮高度
			let titleBarHeight =
				uni.getMenuButtonBoundingClientRect().height;
			//计算两者高度之和
			this.topPadding = statusBarHeight + titleBarHeight;
		},
		methods: {
			//开始拖拽
			handlerTouchStart(event) {
				this.startY = event.touches[0].clientY
			},
			//拖拽中
			handlerTouchMove(event) {
				this.moveY = event.touches[0].clientY
				this.moveDistance = this.moveY - this.startY
				if (this.moveDistance >= 0 && this.moveDistance < this.wideValue) {
					this.translateY = this.moveDistance - this.wideValue
				}
			},
			//结束拖拽
			handlerTouchEnd() {
				this.translateY = -1 * this.wideValue
			},
			handleOpenContact() {
				this.$refs.contact.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "/common/css/index.scss";
	
	.my-page {
		background: #ffffff;
		width: 100%;
		height: 100vh;
		overflow: hidden;

		// 整个头部区域
		.header {
			width: 100%;
			// height: 600rpx;
			background: #3FD3D1;
			overflow: hidden;

			// 用户头像信息ID区域
			.user-info {
				height: 120rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user-info-left-box {
					width: calc(100% - 156rpx);
					height: 100%;
					display: flex;
					align-items: center;

					.user-info-avatar {
						margin-right: 32rpx;
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.login-container {
						width: calc(100% - 120rpx - 32rpx);
						height: 100%;
						display: flex;

						.login-btn {
							color: white;
							line-height: 120rpx;
						}
					}


					.id-num-box {
						width: calc(100% - 120rpx - 32rpx);
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: center;
						box-sizing: border-box;

						.user-name {
							color: white;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 36rpx;
							line-height: 50rpx;
						}

						.user-ids {
							display: flex;
							align-items: center;

							.user-id {
								color: white;
								line-height: 40rpx;
								font-size: 28rpx;
								padding-right: 8rpx;
							}

							.user-tags {
								border: 2rpx solid #ffffff;
								border-radius: 8rpx;
								color: white;
								font-size: 20rpx;
								line-height: 22rpx;
								text-align: center;
								padding: 4rpx 8rpx;
								box-sizing: border-box;

							}
						}
					}

				}

				.user-info-right-box {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 156rpx;

					.text {
						color: #fff;
						font-size: 28rpx;
					}

					.right-icon {
						padding-right: 16rpx;
						transform: rotateZ(180deg);
					}
				}
			}

			// 我的关注，粉丝，资料区域
			.user-data {
				padding: 64rpx 100rpx 0rpx 100rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					display: flex;
					flex-direction: column;
					align-items: center;

					text:nth-child(1) {
						font-size: 32rpx;
						line-height: 34rpx;
						font-weight: bold;
						color: white;
					}

					text:nth-child(2) {
						font-size: 24rpx;
						line-height: 40rpx;
						color: white;
						margin-top: 16rpx;
					}
				}
			}
		}

		.drag-content {
			background: #ffffff;
			transition: all 0.3s linear;

			//圆弧区域
			.arc-container {
				width: 840rpx;
				height: 40rpx;
				transform: translateX(-45rpx);
				background: #3FD3D1;
				border-bottom-right-radius: 375rpx 100%;
				border-bottom-left-radius: 375rpx 100%;

			}

			.scroll-container {
				height: calc(100vh - 494rpx);

				.scroll-container-content {
					padding-top: 64rpx;
					padding-bottom: 64rpx;
				}
			}

			// 功能列表区域
			.my-functions {
				width: 100%;
				background: #ffffff;
				padding: 0rpx 32rpx;
				box-sizing: border-box;

				.icon {
					width: 48rpx;
					height: 48rpx;
				}

				view {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #EEF2F4;
					padding: 32rpx 0rpx 32rpx 0rpx;

					image {
						width: 48rpx;
					}

					text {
						color: #333333;
						margin-left: 36rpx;
						font-size: 28rpx;
					}

					&:last-child {
						border-bottom: 0px solid #EEF2F4;
					}
				}
			}

			//退出登录
			.exit-container {
				padding: 0rpx 32rpx;
				box-sizing: border-box;
				width: 100%;
				padding-top: 282rpx;

				.exit-btn {
					width: 100%;
					height: 96rpx;
					border-radius: 4px;
					background: #F75454;
					color: #FFFFFF;
					font-size: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		// 联系我们
		.contact-us {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 70%;
			display: flex;
			flex-direction: column;
			align-items: center;
			transform: translate(-50%, -50%);

			.contact-us-logo {
				width: 70%;
				z-index: 1;
				transform: translate(-10rpx, 13px);
			}

			.contact-us-content {
				width: 100%;
				background: #ffffff;
				border-radius: 15rpx;
				padding: 80rpx 0rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.contact-us-content-title {
					position: absolute;
					top: 5rpx;
					left: 50%;
					font-size: 20rpx;
					color: #7A7A7A;
					transform: translateX(-40%);
				}

				text {
					line-height: 48rpx;
					font-size: 32rpx;
					color: #3FD3D1;

					&:last-child {
						margin-top: 30rpx;
					}
				}
			}
		}

	}
</style>